<!--
 * new page
 * @author: dh
 * @since: 2023-12-18
 * Header.vue
-->
<template>
  <div class="header">
    <div>MuseMelange</div>
    <div class="header-search">
      <el-input v-model="searchValue"></el-input>
      <el-switch
        inline-prompt
        v-model="theme"
        @click="toggle()"
        :active-icon="Moon"
        :inactive-icon="Sunny"
      >
        切换</el-switch
      >
      <div style="width: 60px;"><span>登陆</span></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useToggle } from "@vueuse/shared";
import { useDark } from "@vueuse/core";
import { ref } from "vue";
import { Moon, Sunny } from "@element-plus/icons-vue";

const theme = ref<boolean>(false);
const searchValue = ref<string>("");

const isDark = useDark({
  // 存储到localStorage/sessionStorage中的Key 根据自己的需求更改
  storageKey: "useDarkKEY",
  // 暗黑class名字
  valueDark: "dark",
  // 高亮class名字
  valueLight: "light",
});

const toggle = useToggle(isDark);
</script>

<style lang="scss" scoped>
.header {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header-search {
    display: flex;
    align-items: center;
    height: 40px;
  }
}
</style>
